<template>
    <div>
        <div class="container">
            <div class="total">
                <ul class="ul1">
                    <li>案例户型：
                        <ul class="ul2">
                            <li>全部</li>
                            <li>一室</li>
                            <li>两室</li>
                            <li>三居</li>
                            <li>四房</li>
                            <li>大户型</li>
                            <li>阁楼</li>
                            <li>自建别墅</li>
                            <li>复式楼</li>
                        </ul>
                    </li>
                    <li>装修风格：
                        <ul class="ul2">
                            <li>全部</li>
                            <li>中式</li>
                            <li>现代</li>
                            <li>新古典</li>
                            <li>新中式</li>
                            <li>田园</li>
                        </ul>
                    </li>
                    <li>房屋面积：
                        <ul class="ul2">
                            <li>全部</li>
                            <li>50平以下</li>
                            <li>50-70m<sup>2</sup></li>
                            <li>70-100m<sup>2</sup></li>
                            <li>100-150m<sup>2</sup></li>
                            <li>150-200m<sup>2</sup></li>
                            <li>200m<sup>2</sup>以上</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="row">
                <div class="col-lg-4" v-for="(key,val) in data" :key="val">
                    <div class="box">
                        <div class="box1">
                            <a><img :src='key.img' alt=""></a>
                        </div>
                        <div class="box2">
                            <p>{{key.txt}}</p>
                            <div class="box3">
                                <span class="span-1">查看详情</span>
                                <span class="span-2">预约设计</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <nav aria-label="Page navigation example">
                <ul class="pagination" @click="getPage($event)">
                    <li class="page-item">
                        <a class="page-link">
                            <span aria-hidden="true">上一页</span>
                        </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="##">1</a></li>
                    <li class="page-item"><a class="page-link" href="##">2</a></li>
                    <li class="page-item"><a class="page-link" href="##">3</a></li>
                    <li class="page-item">
                        <a class="page-link">
                            <span aria-hidden="true">下一页</span>
                        </a>
                    </li>
                </ul>        
            </nav>        
        </div>
    </div>
</template>

<script>
    export default {
        name: "news",

        data(){
            return {
                page:[],//全部
                data:[], //存放后端接收的数据
                targetPage:0, //默认当前显示
                pageSize:3, //总共几页
            }
        },
        mounted(){
            this.$axios('http://localhost:3000/case').then((data)=>{
                console.log(data);
                this.page=JSON.parse(data.data[0].page);
                this.data=this.page.slice(0,3);
            })
        },
        methods:{
            //  分页
            getPage(ev){
                // console.log(ev);       
                if(ev.target.innerHTML!="上一页"&&ev.target.innerHTML!="下一页"){
                    this.targetPage=Number(ev.target.innerHTML)-1;
                    this.data= this.page.slice(this.pageSize*this.targetPage,this.pageSize*(this.targetPage+1));
                    console.log(this.targetPage);
                }
                if(ev.target.innerHTML=="下一页"){
                    console.log(this.targetPage);
                    if(this.targetPage>=2){
                        this.targetPage=2;
                    }else{
                        this.targetPage+=1;
                        this.data= this.page.slice(this.pageSize*this.targetPage,this.pageSize*(this.targetPage+1));
                    }
                }
                if(ev.target.innerHTML=="上一页"){
                    console.log(this.targetPage);
                    if(this.targetPage<=0){
                        this.targetPage=0;
                    }else{
                        this.targetPage-=1;
                        this.data= this.page.slice(this.pageSize*this.targetPage,this.pageSize*(this.targetPage+1));
                    }
                }
            },
        }
    }

</script>

<style scoped lang="less">
    ul{
        list-style: none;
    }
    .total{
        margin-top: 2rem;
    }
    .ul2{
        display: inline-flex;
        padding: 0;
    }
    .ul1>li{
        margin: 1rem 0 0 1rem;
    }
    .ul2>li{
        margin: 0 1rem;
    }
    .box{
        border: 1px solid #ccc;
        width: 100%;
        margin-bottom: 1.8rem;
    }
    .box img{
        width: 100%;height: 260px;
        transform: scale(1);
    }
    .box1{
        overflow: hidden;
    }
    .box2{
        margin-bottom: 1.2rem;
    }
    .box2 p{
        margin: 1rem 0 1rem 1rem;
    }
    .box2 span{
        border: 1px solid #C3C3C3;
        border-radius: 6px;
        padding: 5px 0;
        width: 45%;
        text-align: center;
        font-size: 14px;
    }
    .box3{
        margin: 0 1rem;
        display: flex;
        justify-content: space-between;
    }
    .box:hover{
        box-shadow: 2px 2px 5px #999;
    }
    .box:hover .span-2{
        background: #c30d23;
        color: rgb(255, 255, 255);
        border: 1px solid #c30d23;
    }
    .box:hover img{
        transform: scale(1.1);
        transition: all 1s;
    }
    .box:hover .span-1:hover{
        background: #999 !important;
        color: #fff !important;
    }
</style>